<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/WEB-INF/templates/general.xhtml">

	<ui:define name="title">
		<h:outputText value="Please Sign Up" />
	</ui:define>
	<ui:define name="header">
		<h:outputText value="Please Sign Up" />
	</ui:define>

	<ui:define name="content">
		<h:form id="signUpForm">
			<p:fieldset styleClass="fieldset" legend="Registration Form">
				<p:messages id="messages" />

				<h:panelGrid id="regPanelGrid"
					style="margin: 0 auto; margin-top: 25px; text-align: right"
					cellspacing="8" columns="3">

					<h:panelGroup>
						<h:outputText value="First Name:" />
						<h:outputText style="color:red" value="* " />
					</h:panelGroup>
					<p:inputText id="firstName" label="First Name"
						value="#{userBean.firstName}" required="true"
						title="Please, enter your First Name">
						<f:validateLength minimum="1" />
					</p:inputText>
					<p:tooltip for="firstName" styleClass="toolTip" showEvent="focus"
						hideEvent="blur" />

					<h:panelGroup>
						<h:outputText value="Last Name:" />
						<h:outputText style="color:red" value="* " />
					</h:panelGroup>
					<p:inputText id="lastName" label="Last Name"
						value="#{userBean.lastName}" required="true"
						title="Please, enter your Last Name">
						<f:validateLength minimum="1" />
					</p:inputText>
					<p:tooltip for="lastName" styleClass="toolTip" showEvent="focus"
						hideEvent="blur" />

					<h:panelGroup>
						<h:outputText value="Username:" />
						<h:outputText style="color:red" value="* " />
					</h:panelGroup>
					<p:inputText id="userName" label="Username"
						value="#{userBean.username}" required="true"
						title="Minimum is 4 symbols">
						<f:validateLength minimum="4" />
					</p:inputText>
					<p:tooltip for="userName" styleClass="toolTip" showEvent="focus"
						hideEvent="blur" />

					<h:panelGroup>
						<h:outputText value="Password:" />
						<h:outputText style="color:red" value="* " />
					</h:panelGroup>
					<p:password id="password1" value="#{userBean.password}"
						match="password2" required="true" label="Password 1"
						feedback="true">
						<f:validateLength minimum="8" />
					</p:password>
					<p:tooltip for="password1" styleClass="tooltip" showEvent="focus"
						hideEvent="blur" />

					<h:panelGroup>
						<h:outputText value="Re-enter a Password:" />
						<h:outputText style="color:red" value="* " />
					</h:panelGroup>
					<p:password id="password2" value="#{userBean.password}"
						required="true" label="Password 2">
						<f:validateLength minimum="8" />
					</p:password>
					<p:tooltip for="password2" styleClass="tooltip" showEvent="focus"
						hideEvent="blur" />

					<h:panelGroup>
						<h:outputText value="ID number:" />
						<p:inputMask value="#{userBean.personalNumber}"
							mask="999999-99999" />
					</h:panelGroup>

					<p:commandButton id="backToSignIn" action="backToSignIn"
						immediate="true" icon="ui-icon-closethick"
						value="Cancel Registration" />
					<p:commandButton id="submitButton" update="regPanelGrid,messages"
						actionListener="#{userBean.register}" icon="ui-icon-check"
						value="signUp" />

				</h:panelGrid>
			</p:fieldset>
		</h:form>
	</ui:define>

</ui:composition>